<template>
  <div class="city">
    <div class="c-header" ref="header">
      <div @click="goBack" class="c-left"></div>
      <div class="c-center">{{ currentCity }}</div>
      <router-link to="/adress" class="c-right">切换城市</router-link>
    </div>
    <scroll :sHeight="scrollY" :data="searchList" ref="myScroll">
      <!-- 占位 -->
      <div style="width: 100%; height: 1.226667rem"></div>
      <div class="search">
        <input
          type="text"
          v-model="word"
          placeholder="输入学校、商圈、商务楼地址"
        />
        <div class="btn" @click="onSubmit">提交</div>
      </div>
      <div class="history" :style="{ display: isShow ? 'none' : 'block' }">
        <ul>
          <h3>历史搜索</h3>
          <li
            v-for="(item, index) in adressList"
            :key="index"
            @click="item.name && hisClick(item.latitude, item.longitude)"
          >
            {{ item.name }}
          </li>
          <li
            v-show="adressList.length"
            style="background-color: #ccc; text-align: center"
            @click="clear"
          >
            清空记录
          </li>
        </ul>
      </div>
      <div
        class="search-content"
        :style="{ display: isShow ? 'block' : 'none' }"
      >
        <ul>
          <li
            v-for="(item, index) in searchList"
            :key="index"
            @click="
              item.latitude && goClick(item.latitude, item.longitude, item.name)
            "
          >
            <h4>{{ item.name }}</h4>
            <p>{{ item.address }}</p>
          </li>
        </ul>
      </div>
    </scroll>
  </div>
</template>

<script>
import scroll from "../components/common/scroll";
import { getCityInfo } from "../api/api";
import { getCityAddress } from "../api/api";
import { Toast } from "vant";
import { mapState } from "vuex";
export default {
  components: {
    scroll,
  },
  computed: {
    ...mapState(["adressList"]),
  },
  data() {
    return {
      cityId: 0,
      currentCity: "",
      word: "",
      searchList: [],
      isShow: false,
      scrollY: "",
    };
  },
  methods: {
    onSubmit() {
      if (!this.word.trim()) {
        Toast({
          message: "不能为空",
          position: "top",
        });
      } else {
        //发送请求
        getCityAddress({ city_id: this.cityId, keyword: this.word }).then(
          (res) => {
            if (res.length != 0) {
              this.searchList = res;
            } else {
              Toast({
                message: "暂无数据",
                position: "top",
              });
              this.searchList = [{ name: "暂无数据" }];
            }
            this.isShow = true;
          }
        );
      }
    },
    hisClick(latitude, longitude) {
      //封装一下跳转到首页
      this.$router.push({
        path: "/home",
        query: {
          geohash: latitude + "," + longitude,
        },
      });
    },
    goClick(latitude, longitude, name) {
      //将点击过的地址存入vuex
      let obj = {
        latitude,
        longitude,
        name,
      };
      this.$store.commit("setAdressList", obj);
      localStorage.setItem("state", JSON.stringify(this.$store.state));
      //封装一下跳转到首页
      this.$router.push({
        path: "/home",
        query: {
          geohash: latitude + "," + longitude,
        },
      });
    },
    clear() {
      this.$store.commit("clearAdressList");
      localStorage.setItem("state", JSON.stringify(this.$store.state));
    },
    goBack() {
      this.$router.go(-1);
    },
  },
  created() {
    console.log(this.$route.params.id);
    //请求路由跳转到的城市
    getCityInfo(this.$route.params.id)
      .then((res) => {
        this.cityId = res.id;
        this.currentCity = res.name;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  mounted() {
    this.$nextTick(() => {
      let y = document.body.offsetHeight - this.$refs.header.offsetHeight;
      this.scrollY = y + "";
    });
    if (localStorage.getItem("state")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(localStorage.getItem("state"))
        )
      );
    }
  },
};
</script>

<style lang="scss" scoped>
.city {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  .c-header {
    width: 100%;
    height: 1.226667rem;
    background-color: #50b8fd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    .c-left {
      width: 0.266667rem;
      height: 0.453333rem;
      background: url("../static/img/backw.png") no-repeat center;
      background-size: contain;
      padding-left: 0.32rem;
    }
    .c-center {
      flex: 1;
      text-align: center;
      margin-left: 0.32rem;
      font-size: 0.48rem;
      color: #fff;
    }
    .c-right {
      padding-right: 0.32rem;
      font-size: 0.373333rem;
      color: #fff;
    }
  }
  .search {
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem 0.466667rem;
    margin-top: 0.266667rem;
    background-color: #fff;
    input {
      width: 100%;
      height: 0.666667rem;
      line-height: 0.666667rem;
      padding: 0 0.2rem;
      box-sizing: border-box;
      border: 1px solid #ccc;
      font-size: 0.373333rem;
      color: #999;
      margin-bottom: 0.266667rem;
      &::placeholder {
        color: #999;
      }
    }
    .btn {
      width: 100%;
      background-color: #50b8fd;
      font-size: 0.453333rem;
      color: #fff;
      text-align: center;
      box-sizing: border-box;
      padding: 0.133333rem 0;
    }
  }
  .history {
    padding: 0 0.32rem;
    ul {
      h3 {
        padding: 5px 0;
      }
      li {
        border-top: 1px solid #ccc;
        padding: 0.266667rem;
        color: #333;
        &:last-child {
          border-bottom: 1px solid #ccc;
        }
      }
    }
  }
  .search-content {
    padding: 0 0.32rem;
    li {
      border-top: 1px solid #ccc;
      padding: 0.266667rem;
      font-size: 0.426667rem;
      color: #333;
      &:last-child {
        border-bottom: 1px solid #ccc;
      }
      h4 {
        font-size: 0.4rem;
        margin-bottom: 0.133333rem;
      }
      p {
        font-size: 0.32rem;
        color: #999;
      }
    }
  }
}
</style>